<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="generator" content="Hugo 0.54.0" />
  <link rel="canonical" href="http://shenweiyan.gitee.io/cupper-hugo/cupper-shortcodes/">

  

  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="theme-color" content="#ffffff">

  <link rel="stylesheet" href="http://shenweiyan.gitee.io/cupper-hugo/css/prism.css" media="none" onload="this.media='all';">

  
  
  <link rel="stylesheet" type="text/css" href="http://shenweiyan.gitee.io/cupper-hugo/css/styles.css">

  <style id="inverter" media="none">
    html { filter: invert(100%) }
    * { background-color: inherit }
    img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
  </style>

  
  
  <title>Cupper Shortcodes | Cupper</title>
</head>

  <body>
    <a href="#main">skip to content</a>
    <svg style="display: none">
  <symbol id="bookmark" viewBox="0 0 40 50">
   <g transform="translate(2266 3206.2)">
    <path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
   </g>
  </symbol>

  <symbol id="w3c" viewBox="0 0 127.09899 67.763">
   <text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
   <text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
   <path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
  </symbol>

  <symbol id="tag" viewBox="0 0 177.16535 177.16535">
    <g transform="translate(0 -875.2)">
     <path style="fill-rule:evenodd;stroke-width:0;fill:currentColor" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
    </g>
  </symbol>

  <symbol id="balloon" viewBox="0 0 141.73228 177.16535">
   <g transform="translate(0 -875.2)">
    <g>
     <path style="fill:currentColor" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
     <path style="fill:currentColor" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
     <path style="fill:currentColor" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
     <path style="fill:currentColor" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
     <path style="fill:currentColor" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
     <rect style="stroke-width:0;fill:currentColor" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
    </g>
   </g>
  </symbol>

  <symbol id="info" viewBox="0 0 41.667 41.667">
   <g transform="translate(-37.035 -1004.6)">
    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
    </g>
   </g>
  </symbol>

  <symbol id="warning" viewBox="0 0 48.430474 41.646302">
    <g transform="translate(-1.1273 -1010.2)">
     <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
     <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
    </g>
  </symbol>

  <symbol id="menu" viewBox="0 0 50 50">
     <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="0" x="0"/>
     <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="20" x="0"/>
     <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="40" x="0"/>
   </symbol>

   <symbol id="link" viewBox="0 0 50 50">
    <g transform="translate(0 -1002.4)">
     <g transform="matrix(.095670 0 0 .095670 2.3233 1004.9)">
      <g>
       <path style="stroke-width:0;fill:currentColor" d="m452.84 192.9-128.65 128.65c-35.535 35.54-93.108 35.54-128.65 0l-42.881-42.886 42.881-42.876 42.884 42.876c11.845 11.822 31.064 11.846 42.886 0l128.64-128.64c11.816-11.831 11.816-31.066 0-42.9l-42.881-42.881c-11.822-11.814-31.064-11.814-42.887 0l-45.928 45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526c35.535-35.521 93.136-35.521 128.64 0l42.886 42.881c35.535 35.523 35.535 93.141-.001 128.66zm-254.28 168.51-45.903 45.9c-11.845 11.846-31.064 11.817-42.881 0l-42.884-42.881c-11.845-11.821-11.845-31.041 0-42.886l128.65-128.65c11.819-11.814 31.069-11.814 42.884 0l42.886 42.886 42.876-42.886-42.876-42.881c-35.54-35.521-93.113-35.521-128.65 0l-128.65 128.64c-35.538 35.545-35.538 93.146 0 128.65l42.883 42.882c35.51 35.54 93.11 35.54 128.65 0l72.496-72.499c-23.956 1.597-48.092-3.784-69.474-16.283z"/>
      </g>
     </g>
    </g>
  </symbol>

  <symbol id="doc" viewBox="0 0 35 45">
   <g transform="translate(-147.53 -539.83)">
    <path style="stroke:currentColor;stroke-width:2.4501;fill:none" d="m149.38 542.67v39.194h31.354v-39.194z"/>
    <g style="stroke-width:25" transform="matrix(.098003 0 0 .098003 133.69 525.96)">
     <path d="m220 252.36h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
     <path style="stroke:currentColor;stroke-width:25;fill:none" d="m220 409.95h200"/>
     <path d="m220 488.74h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
     <path d="m220 331.15h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
    </g>
   </g>
 </symbol>

 <symbol id="tick" viewBox="0 0 177.16535 177.16535">
  <g transform="translate(0 -875.2)">
   <rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
   <rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
  </g>
 </symbol>
</svg>

    <div class="wrapper">
      <header class="intro-and-nav" role="banner">
  <div>
    <div class="intro">
      <a class="logo" href="/" aria-label="Cupper home page">
        <img src="http://shenweiyan.gitee.io/cupper-hugo/images/logo.svg" alt="">
      </a>
      <p class="library-desc">
        
          An accessibility-friendly Hugo theme, ported from the <a href="https://github.com/ThePacielloGroup/cupper">original Cupper</a> project.
        
      </p>
    </div>
    <nav id="patterns-nav" class="patterns" role="navigation">
  <h2 class="vh">Main navigation</h2>
  <button id="menu-button" aria-expanded="false">
    <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
      <use xlink:href="#menu"></use>
    </svg>
    Menu
  </button>
  
  <ul id="patterns-list">
  
    <li class="pattern">
      
      
      
      
      <a href="/cupper-hugo/" >
        <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
          <use xlink:href="#bookmark"></use>
        </svg>
        <span class="text">首页</span>
      </a>
    </li>
  
    <li class="pattern">
      
      
      
      
      <a href="/cupper-hugo/post/" >
        <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
          <use xlink:href="#bookmark"></use>
        </svg>
        <span class="text">博客</span>
      </a>
    </li>
  
    <li class="pattern">
      
      
      
      
      <a href="/cupper-hugo/tags/" >
        <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
          <use xlink:href="#bookmark"></use>
        </svg>
        <span class="text">标签</span>
      </a>
    </li>
  
    <li class="pattern">
      
      
      
      
      <a href="/cupper-hugo/about/" >
        <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
          <use xlink:href="#bookmark"></use>
        </svg>
        <span class="text">关于</span>
      </a>
    </li>
  
  

<li class="pattern"><a><span class="text"></span></a></li>



<li class="pattern">
  <a href="https://github.com/shenweiyan/home/edit/master/content/post/cupper-shortcodes/index.md" target="_blank">
    <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
      <use xlink:href="#bookmark"></use>
    </svg>
    <span class="text">编辑</span>
  </a>
</li>
<li class="pattern">
  <a href="/https://github.com/shenweiyan/home/edit/master/content//index.xml" type="application/rss+xml" title="RSS feed">
    <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
      <use xlink:href="#bookmark"></use>
    </svg>
    <span class="text">订阅</span>
  </a>
</li>

<li class="pattern">
  <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International">
    <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
      <use xlink:href="#bookmark"></use>
    </svg>
    <span class="text">版权</span>
  </a>
</li>


  </ul>
</nav>

  </div>
</header>
      <div class="main-and-footer">
        <div>
          
  <main id="main">
    <h1>
      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
        <use xlink:href="#bookmark"></use>
      </svg>
      Cupper Shortcodes
    </h1>

    <div class="date">
      
      
      <strong aria-hidden="true">Publish date: </strong>Feb 12, 2019
      
        
      
    </div>

    
      <div class="tags">
        <strong aria-hidden="true">Tags: </strong>
        <ul aria-label="tags">
          
            <li>
              <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
                <use xlink:href="#tag"></use>
              </svg>
              
              <a href="http://shenweiyan.gitee.io/cupper-hugo/tags/hugo/">hugo</a>
            </li>
          
            <li>
              <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
                <use xlink:href="#tag"></use>
              </svg>
              
              <a href="http://shenweiyan.gitee.io/cupper-hugo/tags/shortcodes/">shortcodes</a>
            </li>
          
        </ul>
      </div>
    
    
    
      

  <nav class="toc" aria-labelledby="toc-heading">
    <h2 id="toc-heading">Table of contents</h2>
    <ol>
      
        <li>
          
          
          
          
          <a href="#blockquote">
            blockquote
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#note">
            note
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#warning-note">
            warning note
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#cmd">
            cmd
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#code">
            code
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#syntax-highlighting">
            syntax highlighting
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#codepen">
            codePen
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#colors">
            colors
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#expandable">
            expandable
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#filetree">
            fileTree
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#ticks">
            ticks
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#figure">
            figure
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#principles">
            principles
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#wcag">
            wcag
          </a>
        </li>
      
        <li>
          
          
          
          
          <a href="#tested">
            tested
          </a>
        </li>
      
    </ol>
  </nav>


    

    

<h2 id="blockquote">blockquote</h2>

<pre><code>{{% blockquote author=&quot;Carl Jung&quot; %}}
Even a happy life cannot be without a measure of darkness, and the word happy would lose its meaning if it were not balanced by sadness. It is far better to take things as they come along with patience and equanimity.
{{% /blockquote %}}
</code></pre>



<blockquote class="blockquote">
  <p>
    Even a happy life cannot be without a measure of darkness, and the word happy would lose its meaning if it were not balanced by sadness. It is far better to take things as they come along with patience and equanimity.
    
      <br>
      <span class="author">&mdash; Carl Jung</span>
    
  </p>
</blockquote>

<h2 id="note">note</h2>

<pre><code>{{% note %}}
This is a note! It's something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.
{{% /note %}}
</code></pre>

<aside aria-label="note" class="note">
  <div>
    <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
      <use xlink:href="#info"></use>
    </svg>
    <p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>

  </div>
</aside>


<h2 id="warning-note">warning note</h2>

<pre><code>{{% warning %}}
This is a warning! It's about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.
{{% /warning %}}
</code></pre>

<aside aria-label="warning" class="note warning">
  <div>
    <svg class="sign" aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
      <use xlink:href="#warning"></use>
    </svg>
    <p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>

  </div>
</aside>


<h2 id="cmd">cmd</h2>

<pre><code>{{&lt; cmd &gt;}}
hugo server --gc
{{&lt; /cmd &gt;}}
</code></pre>

<pre class="cmd"><code>hugo server --gc</code></pre>


<h2 id="code">code</h2>

<pre><code>{{&lt; code numbered=&quot;true&quot; &gt;}}
&lt;div [[[role=&quot;dialog&quot;]]] [[[aria-labelledby=&quot;dialog-heading&quot;]]]&gt;
  &lt;button [[[aria-label=&quot;close&quot;]]]&gt;x&lt;/button&gt;
  &lt;h2 [[[id=&quot;dialog-heading&quot;]]]&gt;Confirmation&lt;/h2&gt;
  &lt;p&gt;Press Okay to confirm or Cancel&lt;/p&gt;
  &lt;button&gt;Okay&lt;/button&gt;
  &lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
{{&lt; /code &gt;}}

1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
3. The close button uses `aria-label` to provide the text label &quot;close&quot;, overriding the text content
4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
</code></pre>





<div class="code-annotated numbered"><code>
&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
  &lt;p&gt;Press Okay to confirm or Cancel&lt;/p&gt;
  &lt;button&gt;Okay&lt;/button&gt;
  &lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</code></div>


<ol>
<li>The dialog is only announced as a dialog if it takes the <code>dialog</code> ARIA role</li>
<li>The <code>aria-labelledby</code> relationship attribute makes the element carrying the <code>id</code> it points to its label</li>
<li>The close button uses <code>aria-label</code> to provide the text label &ldquo;close&rdquo;, overriding the text content</li>
<li>The heading is used as the dialog&rsquo;s label. The <code>aria-labelledby</code> attribute points to its <code>id</code></li>
</ol>

<h2 id="syntax-highlighting">syntax highlighting</h2>

<p>To get syntax highlighting for your code, use markdown code fences, then specify the language:</p>

<pre><code>```html
&lt;div role=&quot;dialog&quot; aria-labelledby=&quot;dialog-heading&quot;&gt;
  &lt;button aria-label=&quot;close&quot;&gt;x&lt;/button&gt;
  &lt;h2 id=&quot;dialog-heading&quot;&gt;Confirmation&lt;/h2&gt;
  &lt;p&gt;Press Okay to confirm or Cancel&lt;/p&gt;
  &lt;button&gt;Okay&lt;/button&gt;
  &lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
```
</code></pre>

<pre><code class="language-html">&lt;div role=&quot;dialog&quot; aria-labelledby=&quot;dialog-heading&quot;&gt;
  &lt;button aria-label=&quot;close&quot;&gt;x&lt;/button&gt;
  &lt;h2 id=&quot;dialog-heading&quot;&gt;Confirmation&lt;/h2&gt;
  &lt;p&gt;Press Okay to confirm or Cancel&lt;/p&gt;
  &lt;button&gt;Okay&lt;/button&gt;
  &lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<h2 id="codepen">codePen</h2>

<pre><code>{{% codePen VpVNKW %}}
</code></pre>



  <iframe height="300" scrolling="no" title="code demonstration with codePen" src="//codepen.io/someuser/embed/VpVNKW/?height=265&theme-id=dark&default-tab=result,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">
    <div>
      <a href="//codepen.io/someuser/pen/VpVNKW">See the demo on codePen</a>
    </div>
  </iframe>



<h2 id="colors">colors</h2>

<pre><code>{{% colors &quot;#111111, #cccccc, #ffffff&quot; %}}
</code></pre>



<div class="colors-container">
  <ul class="colors">
    
      <li style="background-color: #111111;">
        <span>#111111</span>
      </li>
    
      <li style="background-color: #CCCCCC;">
        <span>#CCCCCC</span>
      </li>
    
      <li style="background-color: #FFFFFF; border: 1px solid #111">
        <span>#FFFFFF</span>
      </li>
    
  </ul>
</div>


<h2 id="expandable">expandable</h2>

<pre><code>{{% expandable label=&quot;A section of dummy text&quot; level=&quot;2&quot; %}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
{{% /expandable %}}
</code></pre>

<div class="expandable-section">
  
    <h2>
  
    <button aria-expanded="false" data-expands="js-expandable-4ab31bdd2c2d9d4cac64804c775e2683">
      <span class="expandable-label">A section of dummy text</span>
      <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
        <g transform="translate(0 -981.5)">
          <rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
          <rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
        </g>
      </svg>
    </button>
  
    </h2>
  
  <div id="js-expandable-4ab31bdd2c2d9d4cac64804c775e2683" hidden>
    <p>Here is some markdown including <a href="https://twitter.com/heydonworks">a link</a>. Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.</p>

  </div>
</div>


<h2 id="filetree">fileTree</h2>

<pre><code>{{% fileTree %}}
* Level 1 folder
    * Level 2 file
    * Level 2 folder
        * Level 3 file
        * Level 3 folder
            * Level 4 file
        * Level 3 folder
            * Level 4 file
            * Level 4 file
        * Level 3 file
    * Level 2 folder
        * Level 3 file
        * Level 3 file
        * Level 3 file
    * Level 2 file
* Level 1 file
{{% /fileTree %}}
</code></pre>

<div class="file-tree">
  <ul>
<li>Level 1 folder

<ul>
<li>Level 2 file</li>
<li>Level 2 folder

<ul>
<li>Level 3 file</li>
<li>Level 3 folder

<ul>
<li>Level 4 file</li>
</ul></li>
<li>Level 3 folder

<ul>
<li>Level 4 file</li>
<li>Level 4 file</li>
</ul></li>
<li>Level 3 file</li>
</ul></li>
<li>Level 2 folder

<ul>
<li>Level 3 file</li>
<li>Level 3 file</li>
<li>Level 3 file</li>
</ul></li>
<li>Level 2 file</li>
</ul></li>
<li>Level 1 file</li>
</ul>

</div>


<h2 id="ticks">ticks</h2>

<pre><code>{{% ticks %}}
* Selling point one
* Selling point two
* Selling point three
{{% /ticks %}}
</code></pre>

<div class="ticks">
  <ul>
<li>Selling point one</li>
<li>Selling point two</li>
<li>Selling point three</li>
</ul>

</div>


<h2 id="figure">figure</h2>

<pre><code>{{&lt; figure
img=&quot;sun.jpg&quot; 
caption=&quot;The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. [Credits](https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html).&quot; 
command=&quot;Resize&quot; 
options=&quot;700x&quot; &gt;}}
</code></pre>










  


<figure role="group" aria-describedby="caption-b702144d9bf18a49078547e2789a824e">
  <a href="http://shenweiyan.gitee.io/cupper-hugo/cupper-shortcodes/sun.jpg" class="img-link">
    <img src="http://shenweiyan.gitee.io/cupper-hugo/cupper-shortcodes/sun_huc3d26fbb16c0f70400041133778c1446_3118921_700x0_resize_q99_box.jpg">
  </a>
  <figcaption id="caption-b702144d9bf18a49078547e2789a824e">
    The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. <a href="https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html">Credits</a>.
  </figcaption>
</figure>


<h2 id="principles">principles</h2>

<p>See the <a href="https://github.com/zwbetz-gh/cupper-hugo-theme/blob/master/data/principles.json">full principles list</a>.</p>

<pre><code>{{% principles include=&quot;Add value, Be consistent&quot; descriptions=&quot;true&quot; %}}
</code></pre>





<ul class="principles with-desc">
  
    
  
    
  
    
      <li>
        <strong>
          <a href="https://inclusivedesignprinciples.org#be-consistent">
            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
              <use xlink:href="#balloon"></use>
            </svg>
            Be consistent
          </a>:
        </strong>
        <em>Use familiar conventions and apply them consistently.</em>
        
          <p>Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.</p>
        
      </li>
    
  
    
  
    
  
    
  
    
      <li>
        <strong>
          <a href="https://inclusivedesignprinciples.org#add-value">
            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
              <use xlink:href="#balloon"></use>
            </svg>
            Add value
          </a>:
        </strong>
        <em>Consider the value of features and how they improve the experience for different users.</em>
        
          <p>Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration API&#39;s, and how integration with connected devices or a second screen could provide choice.</p>
        
      </li>
    
  
</ul>


<h2 id="wcag">wcag</h2>

<p>See the <a href="https://github.com/zwbetz-gh/cupper-hugo-theme/blob/master/data/wcag.json">full wcag list</a>.</p>

<pre><code>{{% wcag include=&quot;1.2.1, 1.3.1, 4.1.2&quot; %}}
</code></pre>





<ul class="wcag ">
  
    
  
    
      <li>
        <strong><a href="https://www.w3.org/TR/WCAG20/">
          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
            <use xlink:href="#w3c"></use>
          </svg>
          1.2.1 Audio-only and Video-only (Prerecorded</a> (level A)
        </strong>
        
      </li>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
      <li>
        <strong><a href="https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic">
          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
            <use xlink:href="#w3c"></use>
          </svg>
          1.3.1 Info and Relationships</a> (level A)
        </strong>
        
      </li>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
      <li>
        <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
            <use xlink:href="#w3c"></use>
          </svg>
          4.1.2 Name, Role, Value</a> (level A)
        </strong>
        
      </li>
    
  
</ul>


<h2 id="tested">tested</h2>

<p>See the <a href="https://github.com/zwbetz-gh/cupper-hugo-theme/tree/master/static/images">full browser list</a>.</p>

<pre><code>{{% tested using=&quot;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&quot; %}}
</code></pre>




<table class="tested">
  <tr>
    <th scope="row">
      <svg viewBox="0 0 177.16535 177.16535" focusable="false" aria-hidden="true">
        <use xlink:href="#tick"></use>
      </svg>
      Tested using
    </th>
    
      <td>
        
        
        
        
        <img src="http://shenweiyan.gitee.io/cupper-hugo/images/browser-firefox.svg" alt="">
        <span><strong>Firefox </strong></span>
        
          
          
          <span class="additional">with <strong>JAWS</strong></span>
        
      </td>
    
      <td>
        
        
        
        
        <img src="http://shenweiyan.gitee.io/cupper-hugo/images/browser-chrome.svg" alt="">
        <span><strong>Chrome </strong></span>
        
      </td>
    
      <td>
        
        
        
        
        <img src="http://shenweiyan.gitee.io/cupper-hugo/images/browser-safari-ios.svg" alt="">
        <span><strong>Safari iOS </strong></span>
        
          
          
          <span class="additional">with <strong>Voiceover</strong></span>
        
      </td>
    
      <td>
        
        
        
        
        <img src="http://shenweiyan.gitee.io/cupper-hugo/images/browser-edge.svg" alt="">
        <span><strong>Edge </strong></span>
        
      </td>
    
  </tr>
</table>


  </main>
  <div id="disqus-container">
  
    <button id="disqus-button" onclick="showComments()">Show comments</button>
    <div id="disqus-comments">
      
      
      
        <p><em>Disqus comments are disabled.</em></p>
        <script type="application/javascript">
          function showComments() {
            // Remove button
var disqusButton = document.getElementById('disqus-button');
disqusButton.parentNode.removeChild(disqusButton); 
// Un-hide comments
var disqusComments = document.getElementById('disqus-comments');
disqusComments.style.display = 'block'; 
          }
        </script>
      
      <noscript>Enable JavaScript to view Disqus comments.</noscript>
    </div>
  
</div>


          <footer role="contentinfo">
  <div>
    <label for="themer">
      dark theme: <input type="checkbox" id="themer" class="vh">
      <span aria-hidden="true"></span>
    </label>
  </div>
  
    Made with <a href="https://gohugo.io/">Hugo</a>. Themed by <a href="https://github.com/zwbetz-gh/cupper-hugo-theme">Cupper</a>. Deployed to <a href="https://www.netlify.com/">Netlify</a>.
  
</footer>

        </div>
      </div>
    </div>
    <script src="http://shenweiyan.gitee.io/cupper-hugo/js/prism.js"></script>
<script src="http://shenweiyan.gitee.io/cupper-hugo/js/dom-scripts.js"></script>

    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

    
  
  <script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-123456789-1', 'auto');
  ga('send', 'pageview');
  </script>
  <script async src='https://www.google-analytics.com/analytics.js'></script>
  

  </body>
</html>
